<template>
    <el-container>
      <!--      登录页左侧-->
      <el-aside width="200px" class="leftAside">
        <img src="../assets/loginBox.svg">
        <p class="asideText">欢迎使用登录动力云客系统</p>
      </el-aside>

      <!--      登录页右侧-->
      <el-main>
        <div class="rightContent">
          <p class="mainTitle">欢迎登录</p>
          <el-form
              ref="loginFormRef"
              style="max-width: 600px"
              :model="loginForm"
              status-icon
              :rules="loginRules"
              label-width="120px"
              class="demo-ruleForm"
          >
            <el-form-item label="账号" prop="loginAct">
              <el-input v-model="loginForm.loginAct" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="密码" prop="loginPwd">
              <el-input
                  v-model="loginForm.loginPwd"
                  type="password"
                  autocomplete="off"
              />
            </el-form-item>
            <el-form-item>
              <el-button class="loginBtn" type="primary" @click="submitForm(ruleFormRef)">
                登录
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="loginForm.rememberMe" label="记住我" size="large" />
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      loginForm: {
        loginAct: '',
        loginPwd: '',
        rememberMe: ''
      },
      loginRules: {
        loginAct: [
          {required: true, message: '请输入用户登录名', trigger: 'blur'},
          {min: 2, max: 20, message: '长度应该在1-11位之间', trigger: 'blur'}
        ],
        loginPwd: [
          {required: true, message: '请输入用户密码', trigger: 'blur'},
          {min: 2, max: 20, message: '长度应该在1-11位之间', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    submitForm() {

    }
  }
}
</script>


<style scoped>
.leftAside {
  width: 40%;
  height: calc(100vh);
  background: #1a1a1a;
  text-align: center;
  .asideText {
    font-size: 28px;
    color: white;
  }
  img {
    height: 380px;
  }
}
.rightContent {
  width: 60%;
  text-align: center;
  margin: auto;
  .mainTitle {
    font-size: 14px;
    font-weight: bold;
  }
  .loginBtn {
    width: 100%;
  }
}
</style>